<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Vue-GeoJSON</title>
        <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
        <style type="text/css">
            #main {
                margin: 0 0;
                width: 100%;
                height: 100vh;
            }
            #map {
                height: 100vh;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <mapgis-web-map id="map" :map-style="mapStyle" :zoom="mapZoom" :center="outerCenter" :crs="mapCrs" v-on:load="handleMapLoad">
                <mapgis-ogc-wmts-layer
                    :layer-id="layerWmtsId"
                    :source-id="sourceWmtsId"
                    :base-url="wmtsurl"
                    :tile-matrix-set="tileMatrixSet"
                    :wmts-layer="layer"
                    :format="format"
                    :token="token"
                >
                </mapgis-ogc-wmts-layer>
                <canvas id="canvasID" width="400" height="400">Canvas not supported</canvas>
                <mapgis-canvas-layer
                    :source-id="canvasSourceId"
                    :source="canvasSource"
                    :layer-id="canvasLayerId"
                    :layer="canvasLayer"
                    v-on:layer-source-loading="handCanvasLoad"
                >
                </mapgis-canvas-layer>
            </mapgis-web-map>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        mapStyle: {
                            version: 8,
                            sources: {},
                            layers: []
                        },
                        mapZoom: 5,
                        outerCenter: [116.3, 40.5],
                        mapCrs: 'EPSG:4326',

                        layerWmtsId: 'ogcwmts_layerId',
                        sourceWmtsId: 'ogcwmts_sourceId',
                        wmtsurl: 'http://t0.tianditu.com/vec_c/wmts',
                        layer: 'vec',
                        tileMatrixSet: 'c',
                        format: 'tiles',
                        token: {
                            key: 'tk',
                            value: 'f5347cab4b28410a6e8ba5143e3d5a35'
                        },

                        canvasSourceId: 'canvassourceid',
                        canvasSource: {
                            type: 'canvas',
                            canvas: 'canvasID',
                            coordinates: [
                                [108.7381, 45.6339],
                                [126.0011, 45.6339],
                                [126.0011, 34.2583],
                                [108.7381, 34.2583]
                            ],
                            animate: true
                        },
                        canvasLayerId: 'canvaslayerid',
                        canvasLayer: {
                            source: 'canvassourceid',
                            type: 'raster'
                        }
                    };
                },
                methods: {
                    handleMapLoad(payload) {
                        this.map = payload.map;
                    },
                    handCanvasLoad() {
                        console.log('load');
                        this.initCanvas();
                    },
                    initCanvas() {
                        var canvas = document.getElementById('canvasID');
                        var ctx = canvas.getContext('2d');
                        var circles = [];
                        var radius = 20;

                        function Circle(x, y, dx, dy, radius, color) {
                            this.x = x;
                            this.y = y;
                            this.dx = dx;
                            this.dy = dy;
                            this.radius = radius;
                            this.draw = function () {
                                ctx.beginPath();
                                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                                ctx.strokeStyle = color;
                                ctx.stroke();
                            };
                            this.update = function () {
                                if (this.x + this.radius > 400 || this.x - this.radius < 0) {
                                    this.dx = -this.dx;
                                }
                                if (this.y + this.radius > 400 || this.y - this.radius < 0) {
                                    this.dy = -this.dy;
                                }
                                this.x += this.dx;
                                this.y += this.dy;
                                this.draw();
                            };
                        }
                        for (var i = 0; i < 25; i++) {
                            var color = '#' + (0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6);
                            var x = Math.random() * (400 - radius * 2) + radius;
                            var y = Math.random() * (400 - radius * 2) + radius;
                            var dx = (Math.random() - 0.5) * 2;
                            var dy = (Math.random() - 0.5) * 2;
                            circles.push(new Circle(x, y, dx, dy, radius, color));
                        }
                        function animate() {
                            requestAnimationFrame(animate);
                            ctx.clearRect(0, 0, 400, 400);
                            for (var r = 0; r < 25; r++) {
                                circles[r].update();
                            }
                        }
                        animate();
                    }
                }
            });
        </script>
    </body>
</html>
